<template>
  <section class="testDriverOrderCreationEdit">
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="true"
      :title="textMap[popupsState]"
      :append-to-body="true"
      :visible.sync="curPopupsVisible"
      width="70%"
      @close="closePopups"
    >
      <dialogHeader
        slot="title"
        :title="textMap[dialogStatus ? dialogStatus : popupsState]"
        :style-type="$store.state.app.dialogType"
      />
      <div class="fixHeight">
        <div class="filter-container filter-params">
          <h3 ref="h3s" :style="styleObj" class="showit">试驾车信息</h3>
          <el-row :gutter="26">
            <component
              :is="comp.component"
              v-for="comp in tableComponents1.filter(o => o.isMust === true)"
              :ref="
                comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey
              "
              :key="comp.compKey"
              :validrule="comp.validrule"
              :code-field="comp.codeField"
              :text-field="comp.textField"
              :popups-key="comp.compKey"
              :parent-fileds="comp.parentFileds"
              :code="formField[comp.codeField]"
              :disabled="comp.disabled"
              :o-fields="comp.oFields"
              :options="comp.options"
              :show-placeholder="comp.placeholder"
              :custom-obj="comp.customObj"
              :is-require="comp.isRequire"
              :is-mul="comp.isMul"
              :span="comp.span || 24"
              :label-name="comp.labelName"
              :lookuptype="comp.lookuptype"
              :data-to-object="comp.dataToObject"
              :date-options-type="comp.dateOptionsType"
              @changeCode="getComponentCode"
              @focusCode="getFocusCode"
            />
          </el-row>
        </div>
        <div class="filter-container filter-params">
          <h3 ref="h3s" :style="styleObj" class="showit">开票信息</h3>
          <el-row :gutter="26">
            <component
              :is="comp.component"
              v-for="comp in tableComponents2.filter(o => o.isMust === true)"
              :ref="
                comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey
              "
              :key="comp.compKey"
              :validrule="comp.validrule"
              :code-field="comp.codeField"
              :text-field="comp.textField"
              :popups-key="comp.compKey"
              :show-placeholder="comp.placeholder"
              :code="formField[comp.codeField]"
              :disabled="comp.disabled"
              :is-require="comp.isRequire"
              :is-mul="comp.isMul"
              :o-fields="comp.oFields"
              :options="comp.options"
              :custom-obj="comp.customObj"
              :span="comp.span || 24"
              :label-name="comp.labelName"
              :lookuptype="comp.lookuptype"
              :data-to-object="comp.dataToObject"
              :date-options-type="comp.dateOptionsType"
              @changeCode="getComponentCode"
              @focusCode="getFocusCode"
            />
          </el-row>
        </div>

        <div v-show="showBtns" class="filter-container filter-params">
          <h3 ref="h3s" :style="styleObj" class="showit">车型配置</h3>
          <el-row :gutter="26">
            <component
              :is="comp.component"
              v-for="comp in tableComponents3.filter(o => o.isMust === true)"
              :ref="
                comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey
              "
              :key="comp.compKey"
              :validrule="comp.validrule"
              :code-field="comp.codeField"
              :text-field="comp.textField"
              :popups-key="comp.compKey"
              :show-placeholder="comp.placeholder"
              :parent-fileds="comp.parentFileds"
              :code="formField[comp.codeField]"
              :disabled="comp.disabled"
              :is-require="comp.isRequire"
              :is-mul="comp.isMul"
              :span="comp.span || 24"
              :label-name="comp.labelName"
              :o-fields="comp.oFields"
              :options="comp.options"
              :custom-obj="comp.customObj"
              :lookuptype="comp.lookuptype"
              :data-to-object="comp.dataToObject"
              :date-options-type="comp.dateOptionsType"
              @changeCode="getComponentCode"
              @focusCode="getFocusCode"
            />
          </el-row>
        </div>
        <div class="filter-container filter-params">
          <h3 :style="styleObj">
            车辆信息
            <el-button
              v-if="!editStatus && showBtns"
              type="primary"
              class="iconfont icon-newlyAdded"
              :disabled="disableAdd"
              @click="rowAdd"
            >添加</el-button>
            <span v-show="showBtns" v-else>
              <el-button
                type="danger"
                class="iconfont icon-cancel"
                @click="cancelEdit"
              >取消编辑</el-button>
              <el-button
                type="primary"
                class="iconfont  icon-preservation"
                :disabled="disableAdd"
                @click="saveRow"
              >保存编辑</el-button>
            </span>
          </h3>
          <el-row ref="vailComponentList4" :gutter="26">
            <el-table
              :data="orderList"
              border
              style="width: 100%"
              max-height="200"
              :row-class-name="tableRowClassName"
            >
              <el-table-column type="index" label="序号" align="center" />
              <el-table-column
                v-if="showControl"
                fixed="left"
                label="操作"
                width="100"
                align="center"
              >
                <template
                  v-if="showControl"
                  slot-scope="scope"
                >
                  <el-link
                    type="primary"
                    @click="handleEdit(scope)"
                  >编辑</el-link>
                  <el-link
                    type="danger"
                    @click="handledDel(scope)"
                  >删除</el-link>
                </template>
              </el-table-column>
              <el-table-column
                v-if="auditViewShow"
                key="auditView1"
                prop="auditView"
                label="审核意见"
                align="center"
              />
              <el-table-column prop="carSeriesCn" label="车系" align="center" />
              <el-table-column
                prop="carConfigCn"
                label="基础车型"
                align="center"
              />
              <el-table-column
                prop="optionalPagName"
                label="选装包"
                align="center"
              />
              <el-table-column
                prop="carColorName"
                label="车身颜色"
                align="center"
              />
              <el-table-column
                prop="carIncolorName"
                label="内饰颜色"
                align="center"
              />
              <el-table-column prop="price" label="车型价格" align="center" />
              <el-table-column prop="dlrName" label="体验中心" align="center" />
              <el-table-column prop="orderNum" label="数量" align="center" />
            </el-table>
          </el-row>
        </div>
      </div>
      <div v-show="showBtns" slot="footer" class="dialog-footer">
        <el-button
          v-for="comp in tableButtons"
          :key="comp.compKey"
          :type="comp.type"
          @click="comp.clickEvent"
        >{{ comp.text }}</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
import { formMixins } from '@/components/mixins/formMixins'
import api from '@/api/planReport'
import tdApi from '@/api/testDriver'
import commonData from '../common'
export default {
  name: 'TDOrderCreationEdit',
  components: {
    dialogHeader: () => import('@/components/dialogHeader') // 弹窗标题
  },
  // 组件混入对象
  mixins: [formMixins],
  props: {
    dialogStatus: { type: String, default: '' },
    editData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      auditViewShow: false,
      showBtns: true,
      showControl: true,
      deleteinsaleOrderDId: [],
      deleteupdateControlIdD: [],
      curCarInfo: {},
      editStatus: false,
      curIndex: null,
      // h3标题行内样式
      vehicle: {
        vehicleConfigCode: '',
        vehicleConfigName: ''
      },
      styleObj: { borderLeft: null },
      // 订单列表
      orderList: [],
      // 提取formField
      genCodeFiled: array => attr =>
        array.reduce((p, c) => {
          p[c[attr]] = ''
          return p
        }, {}),
      // 保存API配置对象
      apiConfig: this.dynamicApiConfig,
      // 动态组件-按钮
      // 车辆信息ref
      carRefs: [
        'truecarSeries',
        'truecarConfig',
        'trueoptionalPag',
        'truecarColor',
        'truecarIncolor',
        'trueprice',
        'trueorderNum',
        'trueinsideCarType',
        'truesaleDlrId'
      ],
      tableButtons: [
        {

          compKey: 'btnKey1',
          type: 'primary',
          size: 'small',
          clickEvent: () => this.save(),
          text: this.$t('sys.button.save'),
          isShow: true
        }, // '保存'
        {
          compKey: 'btnKey2',
          type: '',
          size: 'small',
          clickEvent: () => this.reset(),
          text: this.$t('sys.button.reset'),
          isShow: true
        } // 重置
      ],
      // 动态组件-查询条件
      tableComponents: [],
      tableComponents1: [
        {
          compKey: 'compKey2',
          labelName: '试驾车单号：',
          codeField: 'insaleOrderCode',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true,
          // isRequire: true,
          span: 8
        },
        {
          compKey: 'compKey5',
          labelName: '交付门店：',
          codeField: 'deliveryDlrShortName',
          textField: 'deliveryDlrId',
          component: () => import('./deliveryCity'),
          isMust: true,
          disabled: false,
          isRequire: true,
          span: 8
        },
        {
          compKey: 'compKey6',
          labelName: '交付城市：',
          codeField: 'deliverycityText',
          textField: 'deliveryCityId',
          component: () => import('@/components/org/commonInput'),
          type: 'dropdownList',
          isMust: true,
          disabled: true,
          isRequire: true,
          span: 8
        },
        {
          compKey: 'compKey7',
          labelName: '开票城市：',
          codeField: 'invoiceCityTxt',
          textField: 'invoiceCityId',
          component: () => import('@/components/org/commonInput'),
          isMust: true,
          disabled: true,
          isRequire: true,
          span: 8
        },
        {
          compKey: 'compKey8',
          labelName: '备注：',
          codeField: 'remark',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          span: 8
        }
      ],
      tableComponents2: [
        {
          compKey: 'compKey9',
          labelName: '客户类型：',
          codeField: 'invoiceCustType',
          component: () => import('@/components/org/commonSelect'),
          customObj: { selectType: '1' },
          type: 'dropdownList',
          lookuptype: 'VE0248',
          isMust: true,
          disabled: true,
          isRequire: true,
          span: 8
        },
        {
          compKey: 'compKey10',
          labelName: '企业名称：',
          codeField: 'invoiceCustName',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true,
          placeholder: '',
          isRequire: true,
          span: 8
        },
        {
          compKey: 'compKey11',
          labelName: '联系电话：',
          codeField: 'invoiceCustPhone',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          // validrule: { isFixedTel: true },
          isMust: true,
          disabled: true,
          isRequire: true,
          span: 8
        },
        {
          compKey: 'compKey12',
          labelName: '证件类型：',
          codeField: 'invoiceCustCredType',
          component: () => import('@/components/org/commonSelect'),
          customObj: { selectType: '1' },
          lookuptype: 'VE0240',
          isMust: true,
          disabled: true,
          isRequire: true,
          span: 8
        },
        {
          compKey: 'compKey13',
          labelName: '社会信用代码：',
          codeField: 'invoiceCustCredCode',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          disabled: true,
          isMust: true,
          isRequire: true,
          span: 8
        }
      ],
      tableComponents3: [
        ...commonData.ModelOptions(true, 8, true),
        {
          compKey: 'price',
          labelName: '价格：',
          codeField: 'price',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          disabled: true,
          isMust: true,
          isRequire: true,
          span: 8
        },
        {
          compKey: 'orderNum',
          labelName: '申请数量：',
          codeField: 'orderNum',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          validrule: {
            isInteger: true
          },
          isRequire: true,
          span: 8
        },
        {
          compKey: 'insideCarType',
          labelName: '内部用车类型：',
          codeField: 'insaleCarType',
          textField: 'insaleCarTypeName',
          // oFields: 'CtId,CtText',
          lookuptype: 'VE1126',
          component: () => import('@/components/org/commonSelect'),
          customObj: { selectType: '1' },
          type: 'dropdownList',
          isMust: true,
          isRequire: true,
          span: 8
        },
        {
          compKey: 'saleDlrId',
          labelName: '体验中心：',
          codeField: 'saleDlrId',
          textField: 'dlrName',
          component: () =>
            import('../../planReport/components/multipleSearchInput'),
          type: 'inputText',
          dataToObject: {
            // 控制弹窗页面 搜索 网格 元素
            tableComponents: [
              {
                compKey: 'compKey1',
                labelName: '门店编码：',
                codeField: 'dlrCode',
                component: () => import('@/components/org/commonInput'),
                type: 'inputText',
                isMust: true,
                span: 8
              },
              {
                compKey: 'compKey2',
                labelName: '门店名称：',
                codeField: 'dlrShortName',
                component: () => import('@/components/org/commonInput'),
                type: 'inputText',
                isMust: true,
                span: 8
              }
            ],
            tableCols: [
              {
                prop: 'dlrId',
                label: '门店编码',
                hidden: true
              },
              {
                prop: 'dlrCode',
                label: '门店编码'
              },
              {
                prop: 'dlrShortName',
                label: '门店名称'
              }
            ],
            formField: {
              dlrShortName: '',
              dlrCode: ''
            },
            returnField: {
              prop: 'dlrShortName',
              label: '门店名称'
            },
            oFields: 'dlrId,dlrShortName',
            // 体验中心查询
            api: api.ListOfExperience
          },
          isMust: true,
          span: 8,
          isRequire: true
        }
      ],
      // 表单数据（无需赋值，由混入对象赋值）
      formField: {},
      initFormField: null,
      els: null
    }
  },
  computed: {
    // eslint-disable-next-line vue/return-in-computed-property
    disableAdd: function() {
      return (
        this.formField.carSeriesId === '' ||
        this.formField.carConfigId === '' ||
        this.formField.optionalPagId === '' ||
        this.formField.carColorId === '' ||
        this.formField.carIncolorId === '' ||
        this.formField.price === '' ||
        this.formField.orderNum === '' ||
        this.formField.insideCarType === '' ||
        this.formField.saleDlrId === ''
      )
    },
    // eslint-disable-next-line vue/no-dupe-keys
    formFieldNew() {
      return this.$utils.deepCopy(this.formField)
    }
  },
  watch: {
    // 监听 车型选配的5个字段，如果填满了，
    // 并且其中有值发生改变了，将5个字段对应的id发送给后端，计算价格
    // 给价格字段赋值
    formFieldNew: {
      handler(newFields, oldFields) {
        if (
          newFields.carSeriesId &&
          newFields.carConfigId &&
          newFields.optionalPagId &&
          newFields.carColorId &&
          newFields.carIncolorId &&
          (newFields.carSeriesId !== oldFields.carSeriesId ||
            newFields.carConfigId !== oldFields.carConfigId ||
            newFields.optionalPagId !== oldFields.optionalPagId ||
            newFields.carColorId !== oldFields.carColorId ||
            newFields.carIncolorId !== oldFields.carIncolorId)
        ) {
          const {
            carConfigId,
            optionalPagId,
            carColorId,
            carIncolorId
          } = newFields
          this.$requestAPI({
            apiUrl: tdApi.computerPrice.APIUrl,
            variables: {
              carConfigId,
              optionalPagId,
              carColorId,
              carIncolorId
            }
          })
            .then(response => {
              if (response.result === '1') {
                // 字段赋值操作
                this.formField.price = response.rows.sumPrice
                // loading.close()
              } else {
                this.$message(response.msg)
              }
            })
            .catch(err => {
              // loading.close()
              if (err.response.data.msg) {
                this.$message(err.response.data.msg)
              } else {
                this.$message(err.message)
              }
            })
        }
      },
      immediate: true,
      deep: true
    },
    curPopupsVisible: {
      handler: function(val) {
        this.auditViewShow = false
        if (val) {
          // 设置 用车类型默认为 试乘试驾车
          if (this.popupsState === 'edit') {
            // popupsStatus 为 ‘edit’ 并且 dialogStatus 为 ’view' 就是查看页面，隐藏操作列 保存 重置等按钮
            if (this.dialogStatus === 'view') {
              this.setView(false)
              this.auditViewShow = true
            } else {
              this.showControl = true
            }
            this.orderList = this.dynamicEditRowData.carInfo
          } else {
            // 'add' 状态 给内部用车类型 默认值
            this.formField.insaleCarType = this.dynamicEditRowData.insaleCarType
            this.formField.insaleCarTypeName = this.dynamicEditRowData.insaleCarTypeName
            this.orderList = []
          }
        } else {
          // 关闭窗口
          this.dialogStatus === 'view' ? this.setView(!val) : ''
        }
        val ? this.setColor() : (this.deleteinsaleOrderDId = [])
        this.deleteupdateControlIdD = []
        this.$emit('update:popupsVisible', val)
      },
      immediate: true
    },
    // 监听交付城市值 发送请求 获取 其他数据 并赋值
    'formField.deliveryCityId': {
      handler: function(val) {
        // 有值发送请求
        if (val) {
          this.$requestAPI({
            apiUrl: tdApi.QuerySubByCity.APIUrl,
            variables: { cityId: val, deliveryDlrId: this.formField.deliveryDlrId }
          })
            .then(response => {
              if (response.rows.length !== 0) {
                // 请求成功
                const data = response.rows[0]
                this.formField.deliveryCityId = data.cityId
                this.formField.deliverycityText = data.cityName
                this.formField.invoiceCityTxt = data.cityName
                this.formField.invoiceCityId = data.invoiceCityId
                // this.formField.deliveryDlrId = data.deliveryDlrId
                this.formField.invoiceCustCredType = data.invoiceCustCredType.toString()
                this.formField.invoiceCustCredCode = data.invoiceCustCredCode
                this.formField.invoiceCustName = data.invoiceCustName
                this.formField.invoiceCustPhone = data.invoiceCustPhone
                this.formField.invoiceCustType = data.invoiceCustType
              } else {
                this.$message(response.msg)
              }
            })
            .catch(err => {
              this.$message(err.response.data.msg)
            })
        }
      },
      immediate: true,
      deep: true
    },
    'formField.carSeriesId': {
      handler(val) {
        if (!val) {
          this.formField.carConfigId = ''
        }
      }
    },
    'formField.carConfigId': {
      handler(val) {
        if (!val) {
          this.formField.optionalPagId = ''
          this.formField.carColorId = ''
          this.formField.carIncolorId = ''
        }
      }
    }
  },
  created() {
    this.tableComponents = [
      ...this.tableComponents1,
      ...this.tableComponents2,
      ...this.tableComponents3
    ]
    this.genCodeFiled = this.genUtil(this.tableComponents)
    this.formField = this.genCodeFiled('codeField')
  },
  mounted() {
    // invoiceCityId
    // this.$requestAPI({
    //   apiUrl: tdApi.cityList.APIUrl,
    //   variables: { provinceId: '' }
    // })
    //   .then(response => {
    //     if (response.result === '1') {
    //       const comp = this.tableComponents.filter(
    //         item => item.codeField === 'invoiceCityId'
    //       )
    //       comp[0].options = response.rows
    //     }
    //   })
    //   .catch(err => {
    //     console.log(err)
    //   })
    this.setColor()
  },
  methods: {
    setView(openStatus) {
      // 设置 隐藏 显示 操作列 按钮 ... openStatus 为true 关闭窗口 false 打开窗口
      this.showControl = openStatus
      this.showBtns = openStatus
      if (openStatus) {
        // 关
        this.$emit('update:dialogStatus', '')
        // 设置 交付城市 和备注 为禁用状态
        this.disableFields(false)
      } else {
        // 开
        this.disableFields(true)
      }
    },
    disableFields(status) {
      this.tableComponents
        .filter(
          o => o.codeField === 'deliveryDlrShortName' || o.codeField === 'remark'
        )
        .forEach(o => {
          o.disabled = status
        })
    },
    tableRowClassName(row) {
      let className
      row.rowIndex === this.curIndex
        ? (className = 'warm-row')
        : (className = '')
      return className
    },
    deepCopy(obj) {
      const res = obj instanceof Array ? [] : {}
      for (const [k, v] of Object.entries(obj)) {
        res[k] = typeof v === 'object' ? this.deepCopy(v) : v
      }
      return res
    },
    // 保存数据
    saveRow() {
      if (this.rowAdd(this.curIndex)) {
        this.$message('车辆信息修改成功!')
        this.curIndex = null
      }
    },
    // 取消修改 点击事件
    cancelEdit() {
      this.$confirm('要取消修改吗?')
        .then(_ => {
          // this.$set(this.orderList, this.curIndex, this.curCarInfo)
          this.resetCarConfig()
          this.resetCarInfoIconV()
          this.editStatus = false
          this.curIndex = null
        })
        .catch(_ => {})
    },
    // 点击编辑 事件
    handleEdit(scope) {
      this.editStatus = true
      this.curIndex = scope.$index
      const {
        carSeriesId,
        carSeriesCn,
        carConfigId,
        carConfigCn,
        optionalPagId,
        carOptionalpagId,
        optionalPagName,
        carColorId,
        carColorName,
        carIncolorId,
        carIncolorName,
        price,
        orderNum,
        insaleCarType,
        insaleCarTypeName,
        saleDlrId,
        dlrName
      } = scope.row
      this.curCarInfo = {
        carSeriesId,
        carSeriesCn,
        carConfigId,
        carConfigCn,
        optionalPagId,
        optionalPagName,
        carColorId,
        carColorName,
        carIncolorId,
        carIncolorName,
        price,
        orderNum,
        insaleCarType,
        insaleCarTypeName,
        saleDlrId,
        dlrName
      }
      this.formField.carSeriesId = carSeriesId
      this.formField.carSeriesCn = carSeriesCn
      this.formField.carConfigId = carConfigId
      this.formField.carConfigCn = carConfigCn
      this.formField.optionalPagName = optionalPagName
      this.formField.optionalPagId = optionalPagId || carOptionalpagId
      this.formField.carColorId = carColorId
      this.formField.carColorName = carColorName
      this.formField.carIncolorId = carIncolorId
      this.formField.carIncolorName = carIncolorName
      this.formField.price = price
      this.formField.orderNum = orderNum
      this.formField.insaleCarType = insaleCarType
      this.formField.insaleCarTypeName = insaleCarTypeName
      this.$refs['truesaleDlrId'][0].modelText = dlrName
      // this.formField.dlrName = dlrName
      this.formField.saleDlrId = saleDlrId
    },
    handledDel(scope) {
      this.$confirm('确认删除吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(_ => {
          this.curIndex = null
          if (this.orderList[scope.$index].insaleOrderDId) {
            this.deleteinsaleOrderDId.push(
              this.orderList[scope.$index].insaleOrderDId
            )
          }
          if (this.orderList[scope.$index].updateControlId) {
            this.deleteupdateControlIdD.push(
              this.orderList[scope.$index].updateControlId
            )
          }
          this.orderList.splice(scope.$index, 1)
          done()
        })
        .catch(_ => {})
    },
    setColor() {
      const nowSystemColor = this.$store.getters.nowTheme.backgroundColor
      this.styleObj.borderLeft = `3px solid ${nowSystemColor}`
    },
    // 清空车型配置
    resetCarConfig() {
      this.formField.carSeriesId = ''
      this.formField.carSeriesCn = ''
      this.formField.carConfigId = ''
      this.formField.carConfigCn = ''
      this.formField.optionalPagName = ''
      this.formField.optionalPagId = ''
      this.formField.carColorId = ''
      this.formField.carColorName = ''
      this.formField.carIncolorId = ''
      this.formField.carIncolorName = ''
      this.formField.price = ''
      this.formField.orderNum = ''
      // 不清空 用车类型
      // this.formField.insaleCarType = ''
      // this.formField.insaleCarTypeName = ''
      this.formField.saleDlrId = ''
      this.formField.dlrName = ''
    },
    rowAdd(o) {
      this.$utils.validataMoth(
        this,
        'validpopup',
        undefined,
        'multipleTable',
        undefined,
        function(refs) {
          const vpage = {}
          for (const ref in refs) {
            this.carRefs.includes(ref) ? (vpage[ref] = refs[ref]) : ''
          }
          return vpage
        }
      )
      if (this.valid) {
        const {
          carSeriesId,
          carSeriesCn,
          carConfigId,
          carConfigCn,
          optionalPagId,
          optionalPagName,
          carColorId,
          carColorName,
          carIncolorId,
          carIncolorName,
          price,
          orderNum,
          insaleCarType,
          insaleCarTypeName,
          saleDlrId,
          dlrName
        } = this.formField
        const data = {
          carSeriesId,
          carSeriesCn,
          carConfigId,
          carConfigCn,
          optionalPagId,
          optionalPagName,
          carColorId,
          carColorName,
          carIncolorId,
          carIncolorName,
          price,
          orderNum,
          insaleCarType,
          insaleCarTypeName,
          saleDlrId,
          dlrName
        }
        let upd = {}
        if (o !== undefined && typeof o !== 'object') {
          upd = this.orderList[o]
          for (const attr in data) {
            upd[attr] = data[attr]
          }
        }
        const tableRow = !Object.keys(upd).length
          ? this.$utils.deepCopy(data)
          : this.$utils.deepCopy(upd)
        o !== undefined && typeof o !== 'object'
          ? this.$set(this.orderList, o, tableRow)
          : this.orderList.push(tableRow)
        o !== undefined ? (this.editStatus = false) : ''
        this.resetCarConfig()
        this.resetCarInfoIconV()
        return true
      }
      return false
    },
    genUtil: array => (attr1 = 'codeField', attr2 = 'textField') =>
      array.reduce((p, c) => {
        p[c[attr1]] = ''
        // eslint-disable-next-line no-prototype-builtins
        c.hasOwnProperty(attr2) ? (p[c[attr2]] = '') : ''
        return p
      }, {}),
    handleClose() {
      this.$confirm('还未保存，确认关闭窗口？')
        .then(_ => {
          // 清空车辆信息列表，和编辑状态
          this.orderList = []
          this.editStatus = false
          this.curIndex = null
          this.$emit('update:popupsVisible', false)
          done()
        })
        .catch(_ => {})
    },
    resetAll() {
      for (const field in this.formField) {
        this.formField[field] = ''
      }
    },
    resetCarInfoIconV() {
      this.$nextTick(() => {
        for (const comp in this.$refs) {
          this.carRefs.includes(comp)
            ? (this.$refs[comp][0].$children[0].$children[2].iconV = '3')
            : ''
        }
      })
    },
    resetIconV() {
      this.$nextTick(() => {
        for (const comp in this.$refs) {
          if (comp.includes('true')) {
            // 隐藏验证图标
            this.$refs[comp][0].$children[0].$children[2].iconV = '3'
          }
        }
      })
    },
    closePopups() {
      this.resetAll()
      this.resetIconV()
    },
    reset() {
      this.resetAll()
      this.orderList = []
      // this.resetCarConfig()
    },
    save(saveObj, cb) {
      // validpopup  弹窗  validpage 页面
      this.$utils.validataMoth(
        this,
        'validpopup',
        undefined,
        'multipleTable',
        undefined,
        function(refs) {
          const vpage = {}
          for (const ref in refs) {
            !this.carRefs.includes(ref) ? (vpage[ref] = refs[ref]) : ''
          }
          return vpage
        }
      )
      if (this.orderList.length <= 0) { this.$message('车辆信息为空'); return }
      if (this.valid) {
        // if (true) {
        if (this.popupsState === 'edit') {
          this.dynamicApiConfig.APIUrl = tdApi.orderCreationUpdate.APIUrl
          this.apiConfig.APIUrl = tdApi.orderCreationUpdate.APIUrl
        } else {
          this.dynamicApiConfig.APIUrl = tdApi.orderCreationAdd.APIUrl
          this.apiConfig.APIUrl = tdApi.orderCreationAdd.APIUrl
        }
        let reqData = {
          insaleOrderCode: this.formField.insaleOrderCode,
          deliveryCityId: this.formField.deliveryCityId,
          deliveryDlrId: this.formField.deliveryDlrId,
          invoiceCityId: this.formField.invoiceCityId,
          remark: this.formField.remark,
          invoiceCustType: this.formField.invoiceCustType,
          invoiceCustName: this.formField.invoiceCustName,
          invoiceCustPhone: this.formField.invoiceCustPhone,
          invoiceCustCredType: this.formField.invoiceCustCredType,
          invoiceCustCredCode: this.formField.invoiceCustCredCode,
          infoList: this.orderList
        }
        if (this.popupsState === 'edit') {
          reqData = {
            insaleOrderCode: this.formField.insaleOrderCode,
            deliveryCityId: this.formField.deliveryCityId,
            deliveryDlrId: this.formField.deliveryDlrId,
            invoiceCityId: this.formField.invoiceCityId,
            remark: this.formField.remark,
            invoiceCustType: this.formField.invoiceCustType,
            invoiceCustName: this.formField.invoiceCustName,
            invoiceCustPhone: this.formField.invoiceCustPhone,
            invoiceCustCredType: this.formField.invoiceCustCredType,
            invoiceCustCredCode: this.formField.invoiceCustCredCode,
            infoList: this.orderList,
            insaleOrderId: this.dynamicEditRowData.insaleOrderId,
            insaleOrderDId: this.dynamicEditRowData.insaleOrderDId,
            deleteinsaleOrderDId: this.deleteinsaleOrderDId,
            deleteupdateControlIdD: this.deleteupdateControlIdD,
            updateControlId: this.dynamicEditRowData.updateControlId
          }
        }

        this.saveForm(reqData, cb)
      } else {
        this.$message({ message: '必填项不够完整！' })
        if (typeof cb === 'function') {
          cb.call(0)
        }
      }
    }
  }
}
</script>
<style scoped>
>>> div.fixHeight {
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
}
h3 {
  padding-left: 1%;
  text-align: left;
}
/*h3.showit {*/
/*  padding-left: 30%;*/
/*  text-align: left;*/
/*  font-weight: 600;*/
/*  opacity: .3;*/
/*}*/
h3 button.el-button {
  float: right;
  margin-right: 10px;
}

div.filter-container {
  margin-bottom: 35px;
}
>>> .el-table .warm-row {
  background: #eedbae;
}
</style>
